<template>
  <div>
     <tw-chart
      :options="options"
      height="230px"
    ></tw-chart>
  </div>
</template>
<script>
import TwChart from '@/components/TwChart.vue'
export default {
  name: 'tw-linebar',
  components: {
    TwChart
  },
  props: {
    source: {
      type: String,
      default: 'school'
    },
    linetype: {
      type: String,
      default: '2019'
    }
  },
  data () {
    return {
      options: {},
      data: [],
      data2017: [],
      data2018: [],
      data2019: [],
      data2020: [],
      ydata: [],
      oldata: [],
      dataAll: [],
      xdata: [],
      curYear: 2019
    }
  },
  mounted () {
    // this.initData()
    this.app_xsyc_jjzzc()
  },
  watch: {
    '$store.state.curYear' (val) {
      let vm = this
      if (val === 2017) {
        vm.data = vm.data2017
      } else if (val === 2018) {
        vm.data = vm.data2018
      } else if (val === 2019) {
        vm.data = vm.data2019
      } else {
        vm.data = vm.data2020
      }
      vm.setOption()
      vm.curYear = val
    }
  },
  methods: {
    initData () {
      let vm = this
      vm.xdata = []
      vm.$axios.get('/static/weishidataview/jsondata/forecasegongshu.json', {
        baseURL: ''
      }).then((resp) => {
        vm.data = resp.data.fourscater[0]
        vm.data2017 = resp.data.fourscater[0]
        vm.data2018 = resp.data.fourscater[1]
        vm.data2019 = resp.data.fourscater[2]
        vm.data2020 = resp.data.fourscater[3]
        // vm.ydata = resp.data.fourscater[1]
        // vm.oldata = resp.data.fourscater[2]
        vm.setOption()
      }).catch((err) => {
        console.log(err)
      })
    },
    setOption () {
      let vm = this
      let data1 = []
      let data2 = []
      let data3 = []
      let data4 = []
      vm.xdata = []
      vm.data.forEach((item, index) => {
        vm.xdata.push(item.year)
        data1[index] = [item.year + '', item.zong]
        data3[index] = [item.year + '', item.dier]
        data2[index] = [item.year + '', item.diyi]
        data4[index] = [item.year + '', item.disan]
      })
      vm.dataAll = [data1, data2, data3, data4]
      vm.options = {
        color: ['#07ffff', '#07ffff', '#07ffff', '#07ffff'],
        grid: [
          { x: '4%', y: '10%', width: '44%', height: '36%' },
          { x2: '4%', y: '10%', width: '44%', height: '36%' },
          { x: '4%', y2: '2%', width: '44%', height: '36%' },
          { x2: '4%', y2: '2%', width: '44%', height: '36%' }
        ],
        tooltip: {},
        xAxis: [
          { gridIndex: 0, axisLabel: { show: false }, splitLine: { show: false }, data: vm.xdata },
          { gridIndex: 1, axisLabel: { show: false }, splitLine: { show: false }, data: vm.xdata },
          { gridIndex: 2, axisLabel: { show: false }, splitLine: { show: false }, data: vm.xdata },
          { gridIndex: 3, axisLabel: { show: false }, splitLine: { show: false }, data: vm.xdata }
        ],
        yAxis: [
          {
            gridIndex: 0,
            name: '总产出',
            nameLocation: 'end',
            nameGap: 5,
            nameTextStyle: {
              fontSize: 16,
              padding: [0, 90],
              color: '#bad3ff',
              align: 'left'
            },
            axisLabel: { show: false }
          },
          {
            gridIndex: 1,
            name: '第一产业',
            nameLocation: 'end',
            nameGap: 5,
            nameTextStyle: {
              fontSize: 16,
              padding: [0, 90],
              color: '#bad3ff',
              align: 'left'
            },
            axisLabel: { show: false }
          },
          {
            gridIndex: 2,
            name: '第二产业',
            nameLocation: 'end',
            nameGap: 5,
            nameTextStyle: {
              fontSize: 16,
              padding: [0, 90],
              color: '#bad3ff',
              align: 'left'
            },
            axisLabel: { show: false }
          },
          {
            gridIndex: 3,
            name: '第三产业',
            nameLocation: 'end',
            nameGap: 5,
            nameTextStyle: {
              fontSize: 16,
              padding: [0, 90],
              color: '#bad3ff',
              align: 'left'
            },
            axisLabel: { show: false }
          }
        ],
        series: [
          {
            name: '总产出',
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: vm.dataAll[0]
          },
          {
            name: '第一产业',
            type: 'scatter',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: vm.dataAll[1]
          },
          {
            name: '第二产业',
            type: 'scatter',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: vm.dataAll[2]
          },
          {
            name: '第三产业',
            type: 'scatter',
            xAxisIndex: 3,
            yAxisIndex: 3,
            data: vm.dataAll[3]
          }
        ]
      }
    },
    // 经济总支出
    app_xsyc_jjzzc () {
      let vm = this

      let quary = { 'conditions': [], 'fields': [] }
      let dataset = []
      vm.$axios
        .post('tw-cloud-datatheme-server/themedata/app_xsyc_jjzzc', quary)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                let curdata = dataset.filter(itm => itm.year === item.tbnf)
                if (curdata.length > 0) {
                  if (item.tjlx === '经济总产出') {
                    curdata[0].zong = item.sl
                  } else if (item.tjlx === '第一产业经济产出') {
                    curdata[0].diyi = item.sl
                  } else if (item.tjlx === '第二产业经济产出') {
                    curdata[0].dier = item.sl
                  } else if (item.tjlx === '第三产业经济产出') {
                    curdata[0].disan = item.sl
                  }
                } else {
                  if (item.tjlx === '经济总产出') {
                    dataset.push({
                      year: item.tbnf,
                      zong: item.sl
                    })
                  } else if (item.tjlx === '第一产业经济产出') {
                    dataset.push({
                      year: item.tbnf,
                      diyi: item.sl
                    })
                  } else if (item.tjlx === '第二产业经济产出') {
                    dataset.push({
                      year: item.tbnf,
                      dier: item.sl
                    })
                  } else if (item.tjlx === '第三产业经济产出') {
                    dataset.push({
                      year: item.tbnf,
                      disan: item.sl
                    })
                  }
                }
              })
            }
            vm.data = dataset
            if (dataset.length > 4) {
              vm.data2017 = dataset.slice(0, dataset.length - 3)
              vm.data2018 = dataset.slice(0, dataset.length - 2)
              vm.data2019 = dataset.slice(0, dataset.length - 1)
              vm.data2020 = dataset
            } else {
              vm.data2017 = dataset
              vm.data2018 = dataset
              vm.data2019 = dataset
              vm.data2020 = dataset
            }

            vm.setOption()
          },
          (response) => {
            console.log('error')
          }
        )
    }
  }
}
</script>
